<template>
	<view :style="colorStyle">
		<view class='promoterHeader bg-color'>
			<view class='headerCon acea-row row-between-wrapper'>
				
				<view>
					<view class='name'>基础值</view>
					<view class='money'><text class='num'>{{userInfo.jichuzhi}}</text></view>
		
				</view>
				<view>
					<view class='name'>换货积分</view>
					<view class='money'><text class='num'>{{userInfo.integral}}</text></view>
						
				</view>
				<image src="@/static/images/zxc.png" mode="" style="width: 65rpx;height: 65rpx;"></image>
				
				
			</view>
		</view>
		<view style="background: #fff;border-radius: 10px;width: 100%;height: 400px;display: flex;flex-direction: column; align-items:center;padding: 10px;">
			<view class="flex" style="width: 100%;height: 50px;border-radius: 10rpx;border:1px solid #d7d9e0">
				
				<view style="background-color: #f5f6f9;flex:1;display: flex;align-items: center;justify-content: space-between;padding: 0px 10px;">
					<uni-data-select
					      v-model="value"
						  :border="fales"
					      :localdata="range"
					      @change="change"
					    ></uni-data-select>
					<image src="@/static/images/xjt.png" mode="widthFix" style="width: 15px;margin-left: 5px;"></image>
				</view>
				<view style="flex: 1;">
					<input type="number" v-model="value_num"  style="width: 100%;height: 100%;padding: 10px;" placeholder="请输入数量">
				</view>
			</view>
			<image src="@/static/images/jh.png" mode="widthFix" style="width: 50rpx;margin: 10px 0px;"></image>
			<view class="flex" style="width: 100%;height: 50px;border-radius: 10rpx;border:1px solid #d7d9e0">
				
				<view style="background-color: #f5f6f9;flex:1;display: flex;align-items: center;justify-content: space-between;padding: 0px 10px;">
					<uni-data-select
					      v-model="val"
						  :border="fales"
					      :localdata="range"
					      @change="change"
					    ></uni-data-select>
					<image src="@/static/images/xjt.png"  mode="widthFix" style="width: 15px;margin-left: 5px;"></image>
				</view>
				<view style="flex: 1;">
					<input type="number" v-model="value_num" style="width: 100%;height: 100%;padding: 10px;" placeholder="请输入数量">
				</view>
			</view>
			
			<view class="okdui" @click="duihuan()">确认兑换</view>
			
		</view>
	</view>
</template>

<script>
	import colors from '@/mixins/color.js';
	import {getUserInfo,HHexchange} from '@/api/user.js'
	export default {
		data() {
			return {
				value: 1,
				val:2,
				value_num:'',
				val_num:'',
				  range: [
					{ value: 1, text: "基础值" },
					{ value: 2, text: "换货积分" },
				  ],
				  userInfo:{},
				  is_loading:true
		}
		},
		mixins: [colors],
		onShow() {
			getUserInfo().then(res=>{
				this.userInfo = res.data
			})
		},
		methods: {
			duihuan(){
				let that = this;
				if(that.value == that.val){
					uni.showToast({
						title:"请选择不同的币种转换",
						icon:"none"
					})
					return false;
				}
				if(that.value_num <= 0){
					uni.showToast({
						title:"请输入转换数量",
						icon:"none"
					})
					return false;
				}
				if(that.value == 1){
					if(Number(that.value_num) > Number(that.userInfo.jichuzhi)){
						uni.showToast({
							title:"你的基础值不足",
							icon:"none"
						})
						return false;
					}
					
				}
				if(that.value == 2){
					if(Number(that.value_num) > Number(that.userInfo.integral)){
						uni.showToast({
							title:"你的换货积分不足",
							icon:"none"
						})
						return false;
					}
				}
				uni.showModal({
					title:"提示",
					content:"确认转换吗?",
					success:function(res){
						if(res.confirm){
							uni.showLoading({
								title:"转换中..."
							})
							if(that.is_loading){
								that.is_loading = false;
								HHexchange({type:that.value,number:that.value_num}).then(res=>{
									uni.hideLoading()
									that.is_loading = true
									
									uni.showToast({
										title:"转换成功"
									})
									setTimeout(function(){
										that.val_num = 0
										getUserInfo().then(res=>{
											that.userInfo = res.data
										})
									},1000)
									
								}).catch(res=>{
									uni.hideLoading()
									uni.showToast({
										title:res,
										icon:"none"
									})
									that.is_loading = true
								})
							}
						}else if(res.cancel){
							uni.showToast({
								title:"取消转换",
								icon:"none"
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
.okdui{
	width: 100%;
	height: 50px;
	background-color: var(--view-theme);
	border-radius: 10rpx;
	margin-top: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
</style>
